@import "variables";
@import "mixins";
@import "layout";

.topics h3, .topics ul li {
  padding-left: 23px;
}

h3.setup {
  @include background-image-2x($baseurl + "images/icons/setup-sm", 17px, 17px, 0 50%);
}

h3.projects {
  @include background-image-2x($baseurl + "images/icons/projects-sm", 17px, 13px, 0 50%);
}

h3.snapshotting {
  @include background-image-2x($baseurl + "images/icons/camera-sm", 17px, 12px, 0 50%);
}

h3.branching {
  @include background-image-2x($baseurl + "images/icons/branch-sm", 12px, 15px, 4px 50%);
}

h3.sharing {
  @include background-image-2x($baseurl + "images/icons/sharing-sm", 14px, 14px, 2px 50%);
}

h3.inspection {
  @include background-image-2x($baseurl + "images/icons/inspection-sm", 14px, 14px, 1px 50%);
}

h3.patching {
  @include background-image-2x($baseurl + "images/icons/patching-sm", 18px, 11px, 1px 50%);
}

h3.debugging {
  @include background-image-2x($baseurl + "images/icons/debugging-sm", 17px, 16px, 1px 50%);
}

h3.email {
  @include background-image-2x($baseurl + "images/icons/email-sm", 17px, 12px, 1px 50%);
}

h3.external {
  @include background-image-2x($baseurl + "images/icons/external-sm", 17px, 15px, 0 50%);
}

h3.admin {
  @include background-image-2x($baseurl + "images/icons/admin-sm", 16px, 16px, 2px 50%);
}

h3.server-admin {
  @include background-image-2x($baseurl + "images/icons/server-admin-sm", 15px, 15px, 2px 50%);
}

h3.plumbing {
  @include background-image-2x($baseurl + "images/icons/plumbing-sm", 17px, 14px, 2px 50%);
}

// § section sign anchor links
#content {
  h1>a.anchor,
  h2>a.anchor,
  h3>a.anchor,
  h4>a.anchor,
  dt.hdlist1>a.anchor {
    position: absolute;
    display: block;
    width: 1.01em;
    padding-left: 0.5em;
    margin-left: -1.5em;
    font-weight: lighter;
    text-align: center;
    visibility: hidden;
  }

  h1>a.anchor:before,
  h2>a.anchor:before,
  h3>a.anchor:before,
  h4>a.anchor:before,
  dt.hdlist1>a.anchor:before {
    display: block;
    font-size: 0.9em;
    content: "\00A7";
  }

  h1:hover>a.anchor,
  h2:hover>a.anchor,
  h3:hover>a.anchor,
  h4:hover>a.anchor,
  dt.hdlist1:hover>a.anchor {
    visibility:visible
  }
}

#reference-version {
  @extend .section-nav-container;

  a {
    top: -5px;

    &#reference-versions-trigger {
      float: left;
      margin-right: 6px;
    }

    &#reference-topics-trigger {
      float: right;
    }

    &#reference-languages-trigger {
      float: right;
    }
  }
}

#previous-versions-dropdown {
  width: 330px;
  padding-top: 6px;

  header {
    padding: 0 12px;
    margin: 0;
    font-size: 12px;
    font-weight: normal;
  }

  footer {
    padding: 4px 12px;
    margin-top: 0;
    font-size: 11px;
    font-weight: normal;
    color: $font-color;
    background-color: #eae9e0;
    @include border-bottom-left-radius(3px);
    @include border-bottom-right-radius(3px);

    p {
      // `all` and `display` are for overriding the global style defined
      // for <p> at the beginning of "typography.scss".
      all: unset;
      display: block;
      color: $light-font-color;
    }
  }
}

.windows.chrome #previous-versions-dropdown,
.windows.ie8 #previous-versions-dropdown {
  width: 370px;
}

#l10n-versions-dropdown {
  width: 250px;
  right: 12px;
  padding: 12px;
  font-weight: normal;
  line-height: 1;
  header {
    padding: 0 12px;
    margin: 0;
    font-size: 12px;
    font-weight: normal;
  }
  footer {
    padding: 4px 12px;
    margin-top: 0;
    font-size: 11px;
    font-weight: normal;
    a {
        padding: 4px;
        margin-top: 0;
        color: blue;
    }
  }
}

#topics-dropdown {
  width: 650px;
  right: 12px;
  padding: 12px;
  font-weight: normal;
  line-height: 1;

  ul {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }

  li {
    padding-left: 23px;
    line-height: $base-line-height * 0.8;
  }

  h3 {
    min-height: 20px;
    padding-top: 4px;
    padding-left: 23px;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 15px;
  }

  a {
    font-weight: normal;
    padding: 0;

    &.active {
      font-weight: bold;
    }
  }
}

ol.reference-previous-versions {
  @extend .unstyled !optional;
  margin-top: 3px;
  margin-bottom: 0;
  border-top: dotted 1px #e3e3e1;

  li {
    a {
      @include clearfix;
      top: 0 !important;
      display: block;
      padding: 2px 12px;
      border-bottom: dotted 1px #e3e3e1;

      &:hover {
        background-color: #edf7f8;
      }

      &.more {
        font-size: 11px;
      }

      span.version {
        float: left;
        min-width: 40px;
      }

      span.diff {
        padding-right: 16px;
        padding-left: 12px;

        img {
          display: inline-block;
          margin-right: -1px;
        }
      }

      em.date {
        float: right;
        margin-right: 150px;
        font-size: 11px;
        font-style: normal;
        font-weight: normal;
        color: $light-font-color;
      }

      &.more {
        border-bottom: 0;
      }
    }

    &.no-change {
      @include clearfix;
      position: absolute;
      right: 0;
      z-index: 10;
      width: auto;
      padding: 0;
      margin-top: -6px;
      font-size: 11px;
      font-weight: normal;
      line-height: 1.2;
      color: $light-font-color;
      text-align: center;

      span {
        float: left;
        padding: 0 5px;
        @include border-top-left-radius(10px);
        @include border-bottom-left-radius(10px);
        font-size: 10px;
        font-style: italic;
        background-color: #f5f5f3;
      }
    }
  }
}

.callout.quickref {
  @include background-image-2x($baseurl + "images/icons/document", 15px, 21px, 14px 7px);
  padding-left: 36px !important;

  a {
    font-weight: bold;
  }
}

.callout.all-commands {
  @include background-image-2x($baseurl + "images/icons/book", 15px, 21px, 14px 7px);
  padding-left: 36px !important;

  a {
    font-weight: bold;
  }
}

.callout.ref-manual {
  @include background-image-2x($baseurl + "images/icons/book", 54px, 72px, 24px 20px);
  padding: 20px 30px 20px 100px !important;
  background-color: $callout-color;
  iframe {
    max-width: 100%;
  }

  h3 {
    font-size: 18px;
  }

  p {
    font-size: 15px;
    line-height: 1.3em;
  }
}

p.quickref {
  @include background-image-2x($baseurl + "images/icons/document", 15px, 21px, 0 0);
  padding-left: 22px ! important;
  margin-top: -0.4em;
  margin-bottom: 1em;

  a {
    font-weight: bold;
  }
}

.reference-menu {
  h3 {
    padding-left: 26px;
  }

  ul {
    padding-left: 28px;
  }
}

#video-container {
  padding: 10px 10px 2px;
  margin-bottom: 20px;
  background-color: $callout-color;
}

code.command {
  user-select: all;

  &::before {
    content: '$ ';
    font-weight: bold;
  }
}
// Breakpoint ---
@media (max-width: $default){
  #video-container {
    iframe {
      width: 100%;
    }
  }
}
@media (max-width: $mobile-m){
  #video-container {
    iframe {
      height: auto;
    }
  }
}
